<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        max-height="510"
        @selection-change="handleSelectionChange">
      <el-table-column
          fixed
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="jobKey"
          label="任务key"
          sortable
          width="160">
      </el-table-column>
      <el-table-column
          prop="jobGroup"
          label="任务分组"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="jobClass"
          label="job类"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cronExpress"
          label="Cron表达式"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="jobStatus"
          label="任务状态"
          :formatter="formatStatus"
          width="100">
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建人"
          width="140">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="300"
          label="操作">
        <template slot-scope="scope">
          <el-button v-if="editShow" type="primary" @click="editQuartz(scope.row.id)" size="mini">修改</el-button>
          <el-button v-if="delShow" type="primary" @click="deleteQuartz(scope.row.id)" size="mini">删除</el-button>
          <el-button v-if="onceShow" type="primary" @click="executeOnce(scope.row)" size="mini">执行一次</el-button>
          <el-button v-if="pauseShow && scope.row.jobStatus === '0'" type="primary" @click="stopQuartz(scope.row)" size="mini">暂停</el-button>
          <el-button v-if="pauseShow && scope.row.jobStatus === '1'" type="primary" @click="startQuartz(scope.row)" size="mini">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :pageSize="pageSize" :total="total" :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
import PageC from "@/components/PageC";
import {deleteQuartzById, getQuartzs, executeOnce, stopQuartz, startQuartz} from "@/api/quartz";
import {Message} from "element-ui";
export default {
  name: "QuartzTable",
  components: {PageC},
  props: {
    topLevel: {
      required: false,
      default: -1,
      type: Number
    },
    editShow: {
      required: true,
      default: false,
      type: Boolean
    },
    delShow: {
      required: true,
      default: false,
      type: Boolean
    },
    pauseShow: {
      required: true,
      default: false,
      type: Boolean
    },
    onceShow: {
      required: true,
      default: false,
      type: Boolean
    },
    runShow: {
      required: true,
      default: false,
      type: Boolean
    },
  },
  computed: {
    tableData: {
      get() {
        return this.$store.state.quartz.tableData;
      },
      set(value) {
        this.$store.state.quartz.tableData = value;
      }
    },
    // 选中行id
    multipleSelection: {
      get() {
        return this.$store.state.quartz.multipleSelection;
      },
      set(value) {
        this.$store.state.quartz.multipleSelection = value;
      }
    },
    total: {
      get() {
        return this.$store.state.quartz.total;
      },
      set(value) {
        this.$store.state.quartz.total = value;
      }
    },
    pageSize: {
      get() {
        return this.$store.state.quartz.pageSize;
      },
      set(value) {
        this.$store.state.quartz.pageSize = value;
      }
    },
    currentPage: {
      get() {
        return this.$store.state.quartz.currentPage;
      },
      set(value) {
        this.$store.state.quartz.currentPage = value;
      }
    }
  },
  methods: {
    formatStatus(row) {
      return row.jobStatus === '0' ? "启用中" : "暂停中";
    },
    startQuartz(form) {
      this.$confirm('确定要启用该定时任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        startQuartz(form).then((res) => {
          Message.success(res.data.msg);
          this.getQuartzs();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    stopQuartz(form) {
      this.$confirm('确定要暂停该定时任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stopQuartz(form).then((res) => {
          Message.success(res.data.msg);
          this.getQuartzs();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    executeOnce(form) {
      executeOnce(form).then((res) => {
        Message.success(res.data.msg);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {return item.id;})
    },
    getQuartzs() {
      var params = {
        "current": this.currentPage,
        "size": this.pageSize
      };
      // 刷新
      getQuartzs(params).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    editQuartz(id) {
      this.$store.dispatch("quartz/editQuartz", id);
    },
    deleteQuartz(id) {
      this.$confirm('此操作将永久删除该定时任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuartzById(id).then((res) => {
          Message.success(res.data.msg);
          this.getQuartzs();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getQuartzs();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQuartzs();
    }
  },
  created() {
    if (this.$getButtonAuth("job:page")) {
      this.getQuartzs();
    }
  }
}
</script>

<style scoped>

</style>
